<script >
import { Search, DeleteFilled, DocumentAdd } from "@element-plus/icons-vue";

import { noticelist, deldata, addstate, delstatelist } from "@/api/notice";

import { ElMessage } from "element-plus";

export default {
  data() {
    return {
      cxl: {
        value2: "",
        region: "",
        cascader: [],
        search: "",
        options: [
          {
            value: "Year",
            label: "年级",
            children: [
              {
                value: "高中",
                label: "高中",
              },
              {
                value: "小学",
                label: "小学",
              },
            ],
          },
          {
            value: "全校",
            label: "全校",
          },
        ],
      },

      page: 1,

      sheet: 1,

      datel: [],

      state: [],
    };
  },

  methods: {
    list() {},
    cz() {
      this.cxl = {
        value2: "",
        region: "",
        cascader: [],
        search: "",
        options: [],
      };
    },

    //通知列表删除
    del(row) {
      deldata(row).then((res) => {
        if (res.code == 200) {
          ElMessage.success("删除成功");
          noticelist().then((res) => {
            this.datel = res;

            console.log(res);
          });
        }
      });
    },
    //发布列表删除
    delstate(row) {
      delstatelist(row).then((res) => {
        if (res.code == 200) {
          ElMessage.success("删除成功");
          addstate().then((res) => {
            this.state = res;
          });
        }
      });
    },

    addlist() {
      this.$router.push("/Notice/publishNoitce");
    },
    cx(datum) {
      // const updata = [];
      // for(let item in datum){
      //   // console.log(Object.prototype.toString.call(datum[item]))
      //   // if(Object.prototype.toString.call(datum[item])==='object Array'){
      //   //   target[item]=[]
      //   //   const value =[item][1]
      //   //   console.log(value)
      //   // }
      //   this.datel.filter(ele=>[
      //     ![item]||ele.Type||ele.range||ele.cascader||ele.search||ele.children.value.toLowerCase().includes([item].toLowerCase())
      //   ])
      // }
      // updata.push(ele)
      // console.log(this.$refs.reff)
    },
  },
  mounted() {

    //通知列表
    noticelist().then((res) => {
      // console.log(res);
      this.datel = res;
    });
    //发布列表
    addstate().then((res) => {
      this.state = res;
    });
  },

  components: {
    Search,
    DeleteFilled,
    DocumentAdd,
  },
  computed: {
    curr() {
      return this.datel.slice((this.page - 1) * 5, (this.page - 1) * 5 + 5);
    },
    crru() {
      return this.state.slice((this.sheet - 1) * 5, (this.sheet - 1) * 5 + 5);
    },
  },
};
</script>
<template>
  <div>
    通知列表
    <div class="box">
      <el-tabs type="border-card">
        <div class="search">
          <el-tab-pane label="通知列表">
            <el-row :gutter="20">
              <el-col :span="6"
                ><div class="grid-content" />
                选择日期:
                <el-date-picker
                  v-model="cxl.value2"
                  type="daterange"
                  start-placeholder="Start Date"
                  end-placeholder="End Date"
                  :default-value="[new Date(), new Date()]"
              /></el-col>
              <el-col :span="4" :push="2"
                ><div class="grid-content" />
                类型:
                <el-form-item label="">
                  <el-select v-model="cxl.region" placeholder="请选择">
                    <el-option label="通知" value="通知" />
                    <el-option label="活动" value="活动" />
                    <el-option label="缴费通知" value="缴费通知" />
                    <el-option label="选课通知" value="选课通知" />
                    <el-option label="公告" value="公告" />
                    <el-option label="家园任务" value="家园任务" />
                  </el-select> </el-form-item
              ></el-col>
              <el-col :span="4" :push="2"
                ><div class="grid-content" />
                发布范围:
                <el-cascader
                  v-model="cxl.cascader"
                  :options="cxl.options"
                  :props="{ expandTrigger: 'hover' }"
                  placeholder="请选择"
                />
              </el-col>
              <el-col :span="4" :push="2"
                ><div class="grid-content" />
                快速搜索:
                <el-input
                  v-model="cxl.search"
                  class="w-50 m-2"
                  placeholder="请输入发布者姓名"
                  :suffix-icon="cxl.search"
                />
              </el-col>

              <el-col :span="4" :push="2"
                ><div class="grid-content ep-bg-purple" />
                <el-button @click="cx(cxl)" type="primary">查询</el-button>
                <el-button @click="cz" type="info">重置</el-button>
              </el-col>
            </el-row>

            <el-button @click="addlist" class="fb" type="primary">
              <el-icon><DocumentAdd /></el-icon>
              发布通知</el-button
            >
            <el-table ref="reff" :data="curr" border style="width: 100%">
              <el-table-column
                align="center"
                type="index"
                :index="(page - 1) * 5 + 1"
                label="序号"
                width="100"
              />
              <el-table-column
                align="center"
                prop="Type"
                label="类型"
                width="100"
              />

              <el-table-column
                align="center"
                prop="aheader"
                label="标题"
                width="180"
              >
                <template #default="scope">
                  <div  style="color: orange; text-decoration: underline">
                    {{ scope.row.aheader }}
                  </div>
                </template>
              </el-table-column>

              <el-table-column
                align="center"
                prop="range"
                label="发送范围"
                width="180"
              />
              <el-table-column
                align="center"
                prop="nUploader"
                label="发布者"
                width="100"
              />
              <el-table-column
                align="center"
                prop="ddtime"
                label="发布时间"
                width="280"
              />
              <el-table-column align="center" label="操作">
                <template #default="scope">
                  <el-icon class="del" @click="del(scope.row)"
                    ><DeleteFilled
                  /></el-icon>
                </template>
              </el-table-column>
            </el-table>

            <!-- ---------- 分页------------- -->
            <el-pagination
              background
              layout="prev, pager, next"
              :total="datel.length * 2"
              v-model:current-page="page"
            />
          </el-tab-pane>
        </div>
        <el-tab-pane label="我的发布">
          <el-row :gutter="20">
            <el-col :span="6"
              ><div class="grid-content" />
              选择日期:
              <el-date-picker
                v-model="cxl.value2"
                type="daterange"
                start-placeholder="Start Date"
                end-placeholder="End Date"
                :default-value="[new Date(), new Date()]"
            /></el-col>
            <el-col :span="4" :push="2"
              ><div class="grid-content" />
              类型:
              <el-form-item label="">
                <el-select v-model="cxl.region" placeholder="请选择">
                  <el-option label="通知" value="通知" />
                  <el-option label="活动" value="活动" />
                  <el-option label="缴费通知" value="缴费通知" />
                  <el-option label="选课通知" value="选课通知" />
                  <el-option label="公告" value="公告" />
                  <el-option label="家园任务" value="家园任务" />
                </el-select> </el-form-item
            ></el-col>
            <el-col :span="4" :push="2"
              ><div class="grid-content" />
              发布范围:
              <el-cascader
                v-model="cxl.cascader"
                :options="cxl.options"
                :props="{ expandTrigger: 'hover' }"
                placeholder="请选择"
              />
            </el-col>
            <el-col :span="4" :push="2"
              ><div class="grid-content" />
              快速搜索:
              <el-input
                v-model="cxl.search"
                class="w-50 m-2"
                placeholder="请输入发布者姓名"
                :suffix-icon="cxl.search"
              />
            </el-col>

            <el-col :span="4" :push="2"
              ><div class="grid-content ep-bg-purple" />
              <el-button @click="cx(cxl)" type="primary">查询</el-button>
              <el-button @click="cz" type="info">重置</el-button>
            </el-col>
          </el-row>

          <el-button @click="addlist" class="fb" type="primary">
            <el-icon><DocumentAdd /></el-icon>
            发布通知</el-button
          >
          <el-table ref="reff" :data="crru" border style="width: 100%">
            <el-table-column
              align="center"
              type="index"
              :index="(sheet - 1) * 5 + 1"
              label="序号"
              width="100"
            />
            <el-table-column
              align="center"
              prop="Type"
              label="类型"
              width="100"
            />

            <el-table-column
              align="center"
              prop="aheader"
              label="标题"
              width="180"
            >
              <template #default="scope">
                <div  style="color: orange; text-decoration: underline">
                  {{ scope.row.aheader }}
                </div>
              </template>
            </el-table-column>

            <el-table-column
              align="center"
              prop="range"
              label="发送范围"
              width="180"
            />
            <el-table-column
              align="center"
              prop="state"
              label="发布状态"
              width="100"
            >
              <template #default="scope">
                <el-tag
                  v-if="scope.row.state === '草稿'"
                  effect="plain"
                  style="color: rgb(237, 109, 73); border: none"
                >
                  {{ scope.row.state }}
                </el-tag>
                <el-tag
                  v-else-if="scope.row.state === '已发布'"
                  effect="plain"
                  style="color: #3ab955; border: none"
                >
                  {{ scope.row.state }}
                </el-tag>
                <el-tag
                  v-else
                  effect="plain"
                  style="color: #1f29d9; border: none"
                >
                  {{ scope.row.state }}
                </el-tag>
              </template>
            </el-table-column>

            <el-table-column
              align="center"
              prop="ddtime"
              label="发布时间"
              width="280"
            >
              <template #default="scope">
                <el-tag
                  v-if="scope.row.state === '草稿'"
                  effect="plain"
                  style="color: black; border: none"
                >
                  ----
                </el-tag>
                <el-tag
                  v-else-if="scope.row.state === '定时发布'"
                  effect="plain"
                  style="color: #1f29d9; border: none"
                >
                  {{ scope.row.ddtime }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作">
              <template #default="scope">
                <el-icon class="del" @click="delstate(scope.row)"
                  ><DeleteFilled
                /></el-icon>
              </template>
            </el-table-column>
          </el-table>

          <!-- ---------- 分页------------- -->
          <el-pagination
            background
            layout="prev, pager, next"
            :total="state.length *2"
            v-model:current-page="sheet"
          />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.box {
  height: 500px;
  margin-top: 10px;
  background-color: white;

  .el-tab-pane {
    height: 600px;
  }
  .el-date-picker {
    float: left;
  }
  .el-form-item {
    float: left;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .ep-bg-purple {
    margin-top: 18px;
  }
  // .search {
  //   height: 500px;
  // }
  .del {
    width: 30px;
    height: 30px;
    background-color: rgb(248, 67, 86);
    margin-left: 10px;
    border-radius: 7px;
  }
  .fb {
    margin-top: 5px;
    margin-bottom: 20px;
    float: right;
  }
  .el-pagination {
    margin-top: 20px;
  }
}
</style>